<template>
  <view class="pageBg pd262830 box-b">
    <view class="bgff radius12 pd080 box-b minh100h-56">
      <template v-if="order">
        <view class="flex-box">
          <view v-if="type == 1" class="pdt385 tac">
            <server-image class="img173 mga disb" name="repair/20241028008.png" />
            <view class="mgt52">
              <view class="lh34 fs34 fw600 color26">支付成功</view>
              <view class="lh42 fs28 color808 mgt24">
                您已支付本次售后服务费用，我们将马上 安排维修，让产品早日回到您身边！
              </view>
            </view>
          </view>

          <view v-if="type == 2" class="pdt225">
            <server-image class="img173 mga disb" name="repair/20241028007.png" />
            <view class="mgt52 tac">
              <view class="lh34 fs34 fw600 theme-color">售后申报提交成功</view>
            </view>

            <template v-if="order.addressinfo">
              <view class="lh42 fs28 color808 mgt36">你可以将产品寄往如下地址:</view>
              <view class="lh36 mgt36 flex-align">
                <view class="color808 minw136 fs28">联系人：</view>
                <view class="color1a fs28">
                  {{ order.addressinfo.name }}
                </view>
              </view>
              <view class="lh36 mgt20 flex-align">
                <view class="color808 minw136 fs28">联系电话：</view>
                <view class="color1a fs28">
                  {{ order.addressinfo.mob }}
                </view>
              </view>
              <view class="lh36 mgt20 flex-start">
                <view class="color808 minw136 fs28">联系地址：</view>
                <view class="color1a fs28">
                  {{ order.addressinfo.address }}
                </view>
              </view>
            </template>

            <view class="lh42 fs28 color808 mgt36">寄出后记得把快递单号填入报修单哦~</view>
          </view>
        </view>

        <!--    成功后操作    -->
        <view class="mgt76">
<!--          <view-->
<!--            class="flex1 h90 flex-box white radius45 fw400 fs34 ffmi ltsp8"-->
<!--            :class="[-->
<!--              [1].includes(type) ? 'background-main' : '',-->
<!--              [2].includes(type) ? 'background-theme' : '',-->
<!--            ]"-->
<!--            @tap="toReportDetail"-->
<!--          >-->
<!--            查看详情-->
<!--          </view>-->
          <view
            v-if="[1].includes(type)"
            class="flex1 h90 flex-box background-main white radius45 fw400 fs34 ffmi ltsp8"
            @tap="goBack"
          >
            返回列表
          </view>
          <!--    复制地址      -->
          <view
            v-if="[2].includes(type)"
            class="betweenBox">
            <view
              class="w257 white minh80 radius40 fw400 fs34 ffmi flex-box ltsp8"
              :class="[againClick ? 'background-theme' : 'bgd2']"
              @tap="againClick&&copyAddress()"
            >
              复制地址
            </view>
            <view
              class="w257 background-theme white minh80 radius40 fw400 fs34 ffmi flex-box ltsp8"
              @tap="goBack"
            >
              返回列表
            </view>
          </view>

          <!--          <button-->
          <!--            v-if="from == 'APP'"-->
          <!--            class="flex1 bg36b white h90 radius45 fw400 fs34 ffmi ltsp8 flex-box mgt20"-->
          <!--            open-type="launchApp"-->
          <!--            app-parameter="wechat"-->
          <!--            binderror="launchAppError"-->
          <!--          >-->
          <!--            返回APP-->
          <!--          </button>-->
          <!--          <view v-if="!from" class="betweenBox">-->
          <!--            <view-->
          <!--              class="w257 bgf4 color1a minh80 radius40 fs32 fw500 flex-box"-->
          <!--              @tap="switchPage('/pages/index/index')"-->
          <!--            >-->
          <!--              返回首页-->
          <!--            </view>-->
          <!--            <view-->
          <!--              class="w257 background-main white minh80 radius40 fs32 fw500 flex-box"-->
          <!--              @tap="redirectToPage('/pages/product/repair-report/repair-report-detail',true)"-->
          <!--            >-->
          <!--              查看详情-->
          <!--            </view>-->
          <!--          </view>-->
        </view>
      </template>

      <no-data
        v-if="showOrder"
        class="pdb50 pdt225"
        classStyle="width:213rpx;height:182rpx;margin: 0 auto 53rpx;"
        titleColor="#808080"
        nullName="noData.png"
      ></no-data>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';
// 复制地址
import { uniSetClipboardData } from '@/common/utils';
export default {
  name: 'pay-success', // 支付成功
  data() {
    return {
      order: null,
      from: '',
      fromPage: '',
      showOrder: false,
      type: 1, // 1: 支付成功  2：售后申报提交成功
      title: '支付成功',
      // 复制地址
      againClick: true,
    };
  },
  onLoad(e) {
    if (e.from != undefined) {
      this.from = e.from;
    }
    if (e.fromPage != undefined) {
      this.fromPage = e.fromPage;
    }
    if (e && e.type) {
      this.type = Number(e.type);
      if (this.type == 2) {
        this.title = e.title || '提报成功';
      }
    }
    if (this.title) {
      uni.setNavigationBarTitle({
        title: this.title,
      });
    }
    if (e && e.orderid) {
      this.order = {
        orderid: e.orderid,
      };
      if (e.addressinfo) {
        this.order = {
          ...this.order,
          addressinfo: JSON.parse(e.addressinfo),
        };
      }
      this.api_func_getrepairorderdetail(e.orderid);
    }
  },
  computed: {
    ...mapState(['memberInfo']),
  },
  methods: {
    async api_func_getrepairorderdetail(orderid) {
      const vm = this;
      uni.showLoading({
        title: '加载中...',
      });
      return new Promise((resolve) => {
        vm.apiUrl
          .api_func_getrepairorderdetail({
            data: {
              orderid: orderid ? orderid : vm.order.orderid,
              openid: vm.memberInfo.openid,
            },
          })
          .then((res) => {
            uni.hideLoading();
            const { code, msg: message = '', data } = res.data;
            if (code == 0) {
              if (data) {
                let addressinfo = '';
                if (!vm.isObjectEmptyOrUndefined(vm.order.addressinfo)) {
                  addressinfo = vm.order.addressinfo;
                  // addressinfo = [vm.order.addressinfo.name, vm.order.addressinfo.mob, vm.order.addressinfo.address].join(',');
                }
                vm.order = {
                  ...vm.order,
                  ...data,
                  addressinfo: addressinfo,
                };
                resolve();
              }
            } else {
              vm.showMessage({
                title: message,
                icon: 'error',
                duration: 1500,
              }).then(() => {
                vm.goBack();
              });
            }
          })
          .finally(() => {
            if (vm.order && vm.order.orderid) {
              vm.showOrder = false;
            } else {
              vm.showOrder = true;
            }
          });
      });
    },
    toReportDetail() {
      const vm = this;
      if (vm.fromPage == 'reportDetail') {
        vm.goBack();
        return;
      }
      vm.redirectToPage(
        '/pages/product/repair-report/repair-report-detail?orderid=' +
          vm.order.orderid +
          '&checkstatus=' +
          vm.order.checkstatus,
        true
      );
    },
    // 复制地址
    copyAddress(){
        const vm = this;
      const { name, mob, address } = this.order.addressinfo;
      let formattedAddress = `${'联系人：'+name}\n${'联系电话：'+mob}\n${'联系地址：'+address}`;
      vm.againClick = false
      // 获取剪贴板的内容
      uniSetClipboardData({
        data: formattedAddress,
        success: (res) => {
          console.log('res',res)
          const { errMsg } = res;
          if (errMsg == 'setClipboardData:ok'){
            // 覆盖
            uni.showToast({
              title:"复制成功"
            })
          } else {
            // 覆盖
            uni.showToast({
              title:"复制成功"
            })
          }
        },
        fail: function (err) {
          console.log(err);
          const { errMsg } = err;
          if(errMsg) {
            vm.showMessage({
              title: errMsg || 'setClipboardData API 失效',
              // icon: 'error',
              duration: 1500,
            });
          }
        },
      });

      vm.sleep(1500).then(() => {
        vm.againClick = true;
      });
    },

  },
};
</script>

<style lang="less" scoped></style>
